<template>
  <div>
    <div class="form" >
      <div>
        项目名称：<el-input style="width: 200px;" v-model="keyWord.xmmc" placeholder="请输入项目名称"></el-input>
      </div>
      <div>
        提交时间：<el-date-picker v-model="keyWord.jcsj" type="date" placeholder="选择记录提交时间"></el-date-picker>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="showXmJdjl()">搜索</el-button>
      </div>
    </div>
    <div style="padding: 0 80rem 5px 0">
      <el-button type="primary" icon="el-icon-plus"
                 @click="newJdjldialogVisible = true" v-permission="'addXmJdjl'">新增</el-button>
    </div>
    <el-table :data="xmJdjlList" border class="etable">
      <el-table-column align="center" prop="xmMc" label="项目名称">
      </el-table-column>
      <el-table-column align="center" prop="xmJcsj" label="提交时间">
      </el-table-column>
      <el-table-column align="center" prop="tjrMc" label="提交人">
      </el-table-column>
      <el-table-column align="center" prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag effect="dark" type="info" v-if="scope.row.status === '0'">未审批</el-tag>
          <el-tag effect="dark" type="success" v-if="scope.row.status === '1'">已审批</el-tag>
          <el-tag effect="dark" type="danger" v-if="scope.row.status === '2'">驳回</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sprMc" label="审批人">
      </el-table-column>
      <el-table-column align="center" prop="xmCg" label="成果概述">
      </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="300px">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === '0'" @click="toupdateJdjl(scope.row)" type="primary" size="small" v-permission="'updateXmJdjl'">修改
          </el-button>
          <el-button v-if="scope.row.status === '0'" @click="toapprovalJdjl(scope.row)" type="success" size="small" v-permission="'approvalXmJdjl'">审批
          </el-button>

          <el-button @click="toXmJdjlDetail(scope.row.jdjlBh)" type="info" size="small">详情
          </el-button>&nbsp;&nbsp;
          <el-popconfirm v-if="scope.row.status === '0'" title="确定删除该记录吗？"
                         @confirm="deleteXmJdjl(scope.row.jdjlBh)">
            <el-button slot="reference" type="danger" size="small" v-permission="'removeXmJdjl'">删除
            </el-button>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination ref="fenye" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="pageNo" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="size">
      </el-pagination>
    </div>

    <el-dialog title="新增项目进度记录" :visible.sync="newJdjldialogVisible" width="30%">
      <el-form :model="newJdjl">
        <el-form-item label="项目名称" label-width="100px">
          <el-input v-model="newJdjl.xmMc" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="成果概述" label-width="100px">
          <el-input v-model="newJdjl.xmCg" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newJdjldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addXmJdjl()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改项目进度记录" :visible.sync="updateJdjldialogVisible" width="30%">
      <el-form :model="upJdjl">
        <el-form-item label="项目名称" label-width="100px">
          <el-input v-model="upJdjl.xmMc" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="成果概述" label-width="100px">
          <el-input v-model="upJdjl.xmCg" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateJdjldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateXmJdjl()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="审批项目进度记录" :visible.sync="approvalJdjldialogVisible" width="30%">
      <el-form :model="approvalJdjl">
        <el-form-item label="项目名称" label-width="100px">
          <el-input v-model="approvalJdjl.xmMc" autocomplete="off" disabled ></el-input>
        </el-form-item>
        <el-form-item label="成果概述" label-width="100px">
          <el-input disabled v-model="approvalJdjl.xmCg" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
        <el-form-item label="是否审批通过" label-width="120px">
          <el-radio v-model="approvalJdjl.status" label="1">审批通过</el-radio>
          <el-radio v-model="approvalJdjl.status" label="2">驳回</el-radio>
        </el-form-item>
        <el-form-item label="审批意见/驳回意见" label-width="80px">
          <el-input v-model="approvalJdjl.sprYj" autocomplete="off" type="textarea" :rows="3" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="approvalJdjldialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="approvalXmJdjl()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="项目进度记录详情" :visible.sync="JdjlDetaildialogVisible" width="30%">
      <el-descriptions  column="1" border>
        <el-descriptions-item label="项目名称">{{ xmJdjlDetail.xmMc }}</el-descriptions-item>
        <el-descriptions-item label="成果概述">{{ xmJdjlDetail.xmCg }}</el-descriptions-item>
        <el-descriptions-item label="是否审批通过">
          <el-tag v-if="xmJdjlDetail.status == '1'" size="small" type="primary">审批通过</el-tag>
          <el-tag v-if="xmJdjlDetail.status == '2'" size="small" type="danger">已驳回</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="审批意见/驳回意见">{{ xmJdjlDetail.sprYj }}</el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="JdjlDetaildialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="JdjlDetaildialogVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {queryXmJdjl,addXmJdjl,updateXmJdjl,approvalXmJdjl} from "@/api/cxcyxm"
import axios from "../../axios/axios.js";

export default {
  data() {
    return {
      pageNo: 1,
      pageSize: 10,
      totalSize: 0,
      keyWord:{
        xmmc:"",
        jcsj:"",
        xmBh:localStorage.getItem("xmBh")
      },
      size: 0,
      loading: true,
      xmJdjlList: [],
      newJdjldialogVisible: false,
      updateJdjldialogVisible: false,
      newJdjl:{
        xmBh:localStorage.getItem("xmBh"),
        xmMc:localStorage.getItem("xmMc"),
        xmCg:""
      },
      upJdjl:{
        jdjlBh:"",
        xmBh:localStorage.getItem("xmBh"),
        xmMc:localStorage.getItem("xmMc"),
        xmCg:""
      },
      approvalJdjl:{
        jdjlBh:"",
        xmBh:localStorage.getItem("xmBh"),
        xmMc:localStorage.getItem("xmMc"),
        xmCg:"",
        status:"1",
        sprYj:"",
      },
      approvalJdjldialogVisible: false,
      JdjlDetaildialogVisible:false,
      xmJdjlDetail:{}
    }
  },
  created() {
    this.showXmJdjl()
  },
  methods: {
    showXmJdjl() {
      queryXmJdjl({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code !== "200") {
          this.$message.error(res.msg);
        } else {
          this.xmJdjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = parseInt(`${val}`);
      this.pageNo = 1;
      queryXmJdjl({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        keyWord:this.keyWord
      }).then(res => {
        if (res.code === "200") {
          this.xmJdjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }

      })
    },
    handleCurrentChange(val) {
      this.pageNo = parseInt(`${val}`);
      if (this.pageNo > this.totalSize) {
        this.pageNo = this.totalSize
      }

      queryXmJdjl(
          {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            keyWord:this.keyWord
          }).then(res => {
        if (res.code === "200") {
          this.xmJdjlList = res.data.rows
          this.size = res.data.total
          this.totalSize = res.data.pageNums
          this.loading = false;
        } else {
          this.$message.error(res.msg);
        }
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    addXmJdjl(){
      addXmJdjl(this.newJdjl).then(res =>{
        if (res.code == "200"){
          this.newJdjldialogVisible = false
          this.$message.success(res.msg)
          this.showXmJdjl()
          this.$router.go(0)
        }else {
          this.$message.error(res.msg)
        }

      })

    },
    toupdateJdjl(jdjl){
      this.upJdjl = jdjl
      this.updateJdjldialogVisible = true
    },
    toapprovalJdjl(jdjl){
      this.approvalJdjl = jdjl
      this.approvalJdjldialogVisible = true
    },
    updateXmJdjl(){
      this.upJdjl["sprBh"] = localStorage.getItem("userBh");
      this.upJdjl["sprMc"] = localStorage.getItem("userName");
      updateXmJdjl(this.upJdjl).then(res =>{
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.updateJdjldialogVisible = false
          this.showXmJdjl()
          this.$router.go(0)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    approvalXmJdjl(){
      approvalXmJdjl(this.approvalJdjl).then(res =>{
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.approvalJdjldialogVisible = false
          this.showXmJdjl()
          this.$router.go(0)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    deleteXmJdjl(jdjlBh){
      axios({
        method: "POST",
        url: "/xmJdjl/removeXmJdjl/" + jdjlBh
      }).then(res => {
        if (res.code == "200") {
          this.$message({
            message: res.msg,
            type: "success"
          })
          this.showXmJdjl()
          this.$router.go(0)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    toXmJdjlDetail(jdjlBh){
      axios({
        method: "GET",
        url: "/xmJdjl/getXmJdjlDetail/" + jdjlBh
      }).then(res => {
        if (res.code == "200") {
          this.xmJdjlDetail = res.data
          this.JdjlDetaildialogVisible = true
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style>
.form{
  width:60%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  right: -5%;
  display: flex;
  justify-content: space-around;
  padding: 20px 0 20px 0;
}
.etable{
  width: 90%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
